<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片滚动 xslider 插件 图片左右滚动、上下滚动</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}

a.abtn{display:block; height:13px;width:13px;overflow:hidden;}
a.aleft{float:left; bottom: 0px; background:url(assets/up.png) no-repeat 0 0;}
a.agrayleft{cursor:default; background:url(assets/up.png) no-repeat 0 -13px;}
a.aright{float: left; background:url(assets/down.png) no-repeat 0 0;}
a.agrayright{cursor:default; background:url(assets/down.png) no-repeat 0 -13px;}

#s2{width: 172px; height: 350px; }
#s2 .imglist_w {width:172px; height: 324px; overflow:hidden;float:left;position:relative; }
#s2 .imglist_w ul{width: 172px; height:324px;width:auto;position:absolute;left:0px;top:0px;}
#s2 .imglist_w li{width: 172px; float:none;}
#s2 .imglist_w li div{width: 172px; text-align:left; vertical-align: top;padding-left: 5px;color:#bdbdbd; height:35px;line-height:24px;overflow:hidden;  border-left: solid 1px #4a4a4a; border-bottom: solid 1px #4a4a4a; cursor: pointer;}
#s2 .imglist_w li div:hover{background-color: #434343;}
.high{background-color: #434343;}
.normal{background-color: #1b1b1b;}
.show_upload {
  width: 828px;
  height: 600px;
background-color: #1b1b1b;
color: #fff;
}
</style>
</head>

<body align="center">
<div align="center">
<table width="1000px" height="600px">
<tr><td align="left" valign="top">
<div  align="center">
  <div class="scrolllist" id="s2">
    <a class="abtn aleft" href="#left" title="左移" href="javascript:void(0)" onmousedown="moveTop()"></a>
    <div class="imglist_w" id="div_show"></div>
    <a class="abtn aright" href="#right" title="右移" href="javascript:void(0)" onmousedown="moveBottom()"></a>
  </div>
</div>
</td>
<td align="left" valign="top" width="828px">
<div class="show_upload" id="show_upload"></div>
</td>
</tr>
</table>
</div>
  <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
  <script type="text/javascript" src="assets/slider.js"></script>
  <script type="text/javascript">
//  var current = 1;
//  window.onload = setScrollDiv(current);
//  
//  function setScrollDiv() {
//    var _self = this;
//    var pages = 20;
//    
//	  var div = document.getElementById('div_show');
//	  var ul = document.createElement('ul');
//	  ul.className = 'imglist';
//	  for (var i = 1, il = pages; i <= il; i++) {
//	    var li = document.createElement('li');
//	    while (li && li.firstChild) {
//        li.removeChild(li.firstChild);
//      }
//	    var div1 = document.createElement('div');
//	    if (i == current) {
//	      div1.className = 'high';
//	    } else {
//	      div1.className = 'normal';
//	    }
//	    
//	    div1.appendChild(document.createTextNode('Page ' + ((i < 10) ? '0' : '') + i));
//	    div1._page = i;
//	    div1.onclick = function() { current = this._page;
//	                                setUpload(current);
//	                                setScrollDiv(current);
//	    }
//	    li.appendChild(div1);
//	    ul.appendChild(li);
//	  }
//	  div.appendChild(ul);
//
//	  $(function(){
//	    //设置上下滚动
//	    var unitlen = 36;
//	    var unitdisplayed = 9;
//	    var movelength = 1;
//	    var nowlength = pages * unitlen;
//	    var cur = $('.imglist').css('top');
//	    $("#s2").xslider({
//	      unitdisplayed: unitdisplayed,
//	      movelength: movelength,
//	      nowlength: nowlength,
//	      dir: "V",
//	      unitlen: unitlen,
//	      autoscroll: null,
//	      current: Math.abs(cur.substr(0, cur.length-2))
//	    });
//	  });
//  }
//
//  function setUpload(current) {
//    console.log(current);
//  }
  
  </script>

<script type="text/javascript">
var current = 1;
window.onload = setScrollDiv(current);

function setScrollDiv() {
  var _self = this;
  var pages = 20;
  
  var div = document.getElementById('div_show');
  var ul = document.createElement('ul');
  ul.className = 'imglist';
  for (var i = 1, il = pages; i <= il; i++) {
    var li = document.createElement('li');
    while (li && li.firstChild) {
      li.removeChild(li.firstChild);
    }
    var div1 = document.createElement('div');
    if (i == current) {
      div1.className = 'high';
    } else {
      div1.className = 'normal';
    }
    
    div1.appendChild(document.createTextNode('Page ' + ((i < 10) ? '0' : '') + i));
    div1._page = i;
    div1.onclick = function() { current = this._page;
                                setUpload(current);
                                setScrollDiv(current);
    }
    li.appendChild(div1);
    ul.appendChild(li);
  }
  div.appendChild(ul);
}

function setUpload(current) {
  console.log(current);
}




function $(obj){//获取指定对象
  return document.getElementById(obj);
}
var maxHeight=$("div_show").getElementsByTagName("ul")[0].getElementsByTagName("li").length*36;//滚动图片的最大高度
var targety = 36*9;//一次滚动距离
var dx;
var a=null;
function moveTop(){
  var le = parseInt($("div_show").scrollTop);
  if(le>324){
    targety=parseInt($("div_show").scrollTop)-324;
  }else{
    targety=parseInt($("div_show").scrollTop)-le;
  }
  scTop();
}
function scTop(){
  dx=parseInt($("div_show").scrollTop) - targety;
  console.log(dx);
  $("div_show").scrollTop -= dx * .3;
  clearScroll = setTimeout(scTop, 50);
  if (dx * .3 <= 0) {
    clearTimeout(clearScroll);
  }
}
function moveBottom() {
  console.log(maxHeight, parseInt($("div_show").scrollTop));
  var le = parseInt($("div_show").scrollTop) + targety;
  var maxL = maxHeight - targety;
  if(le < maxL){
    targety=parseInt($("div_show").scrollTop) + targety;
  }else{
    targety = maxL;
  }
  scBottom();
}
function scBottom(){
  dx = targety-parseInt($("div_show").scrollTop);
  $("div_show").scrollTop += dx *.3;
  a=setTimeout(scBottom, 50);
  if(dx*.3 <= 0) {
    clearTimeout(a)
  }
}
</script>
</body>
</html>
